<%--
  Created by IntelliJ IDEA.
  User: 24893
  Date: 2022/11/28
  Time: 15:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页面</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/xqym.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/layer.js"></script>
</head>
<body>
<div class="centent">
    <!-- 导航 -->
    <div class="layui-container header">
        <div class="layui-row ">
            <div class="layui-col-md2">
                <img class="logo" src="${pageContext.request.contextPath}/images/logo.png" alt="">
                <p class="logo_font">IRON电影</p>
            </div>
            <div class="layui-col-md4" style="margin-left: 100px">
                <span class="layui-breadcrumb " lay-separator="  " >
               <a href="http://localhost:8080/demo/product">首页</a>
                  <a href="http://localhost:8080/demo/film">电影</a>
                <a href="https://www.bilibili.com/">体育</a>
                <a href="https://www.bilibili.com/">搞笑</a>
                <a href="https://www.bilibili.com/">视频</a>
                <a href="${pageContext.request.contextPath}/hot.jsp">热点</a>

                <a href="${pageContext.request.contextPath}/movie_rank.jsp">榜单</a>
              </span>
            </div>
            <div class="layui-col-md2">
                <div class="header_user">
                    <a href="${pageContext.request.contextPath}/personalCenter.jsp" id="header_myself"><span>个人中心</span></a>
                    <a href="${pageContext.request.contextPath}/personalCenter.jsp"> <img id="header_myself_logo" src="${pageContext.request.contextPath}/images/user.png" alt=""></a>
                </div>
            </div>
        </div>
    </div>
    <div class="banner">
        <div class="wapper">
            <div class="celeInfo_left">
                <div class="avatar_shadow">
                    <img class="avatar" src="${film.filmImg}" alt=""/>
<%--                    <div class="movie_ver">--%>
<%--                        <i class="imax2d"></i>--%>
<%--                    </div>--%>
                </div>
            </div>
            <div class="celeInfo_right">
                <div class="movie_brief_container">
                    <h1 class="name">${film.filmCname}</h1>
                    <div class="ename ellipsis">${film.filmEname}</div>
                    <ul>
                        <li class="ellipsis">
                            <c:forEach var="type" items="${typeList}">
                                 <a class="text_link" target="_blank" href="">${type.typeName}</a>
                            </c:forEach>
                        </li>
                        <li class="ellipsis">${film.filmRegion}/${duration}分钟</li>
                        <li class="ellipsis">${ctime}中国大陆上映</li>
                    </ul>
                </div>
                <div class="action_Btn">

                    <button class="score" >
                        <img src="${pageContext.request.contextPath}/images/p3.png" alt="">评分
                    </button>
                    <a href="http://localhost:8080/demo/product/${film.filmProid}" class="s">立即购票</a>
                </div>
            </div>
            <div class="movie_stats_container">
                <div class="movie_index">
                    <p>猫眼口碑</p>
                    <div class="index_right" >
                        <div id="pf">
                            <span class="s1">${film.filmScore}</span>
                            <div class="star_wapper">
                                <div class="star_on" id="d1" style=""></div>
                            </div>
                            <span class="s2" id="s2"></span>
                        </div>
                        <div id="zw"><h1>暂无</h1></div>
                    </div>
                    <div class="bo">
                        <span>累计票房</span><br>
                        <h1 id="bos"></h1>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="main">

        <ul class="cd">
            <li><a href="#">猫眼电影</a></li>
            <li>></li>
            <li><a href="#">电影</a></li>
            <li>></li>
            <li>${film.filmCname}</li>
        </ul>
        <div class="layui-tab layui-tab-brief tab_title_left layui-col-md9" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title tab_title">
                <li class="layui-this">介绍</li>
                <li>演职人员</li>
                <li>奖项</li>
                <li>图集</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="js">
                        <h2 class="bt">剧情简介</h2>
                        <div class="s3">${film.filmInfo}
                        </div>
                        <div class="yzry">
                            <h2 class="bt">演职人员</h2>
                            <a href="#" class="a1">全部<img src="${pageContext.request.contextPath}/images/p6.png" alt=""></a>
                            <div class="celebrity_group">
                                <div class="bt2">导演</div>
                                <div ><a href="#"><img src="${director.drImg}" alt=""></a></div>
                                <div class="info"><a href="#">${director.drName}</a></div>
                            </div>
                            <div class="celebrity_group1">
                                <div class="bt3">演员</div>
                                <ul class="yy">
                                    <c:forEach var="actor" items="${actorList}">
                                    <li><div><a href=""><img src="${actor.actorImg}" alt=""></a></div>
                                        <a class="a2" href="#">${actor.actorName}</a><br>
                                        <span class="role">${actor.actorCos}</span></li>
                                    </c:forEach>
                                </ul>
                            </div>
                        </div>
                        <div class="js_jx">
                            <h2 class="bt">奖项</h2>
                            <a href="#" class="a1">全部<img src="${pageContext.request.contextPath}/images/p6.png" alt=""></a>
                            <img src="https://p0.meituan.net/movie/3f23c8fcf910f94011f7fba6c4848b3f15093.jpg@50w_50h_1e_1c" alt="">
                            <span class="s9"> 第14届澳门国际电影节</span>
                            <span class="s10">提名：金莲花奖-最佳影片 / 金莲花奖-最佳男主角 / 金莲花奖-最佳女主角 / 金莲花奖-最佳男配角 / 金莲花奖-最佳女配角</span>
                        </div>
                        <div class="js_tj">
                            <h2 class="bt">图集</h2>
                            <a href="#" class="a1">全部<img src="${pageContext.request.contextPath}/images/p6.png" alt=""></a>

                            <img class="i1" src="${stillsList.get(0).stillsImg}" alt="">
                            <ul class="u1">
                                <c:forEach var="stills" items="${stillsList}" begin="1">
                                    <li><img src="${stills.stillsImg}"></li>
                                </c:forEach>
                            </ul>
                        </div>
                        <div class="rmdp">
                            <h2 class="bt">热门短评</h2>
                            <a  class="a3" href="#">写短评</a>
                            <div class="plq">
                                <div class="pl">
                                    <div class="pl_dz">
                                        <span class="report">举报</span>
                                        <div class="approve">
                                            <img src="${pageContext.request.contextPath}/images/p19.png" alt="">
                                            <span class="num">9193</span>
                                        </div>
                                    </div>


                                    <div class="tx"><img class="man1" src="${pageContext.request.contextPath}/images/p17.jpg" alt="">
                                        <img class="dj" src="${pageContext.request.contextPath}/images/p18.png" alt="">
                                    </div>
                                    <div class="pl_user"><span class="pname">iwanlong</span>
                                        <span class="tag">购</span></div>

                                    <div class="pl_time" title="2022-09-30 20:38:38">
                                        <span title="2022-09-30 20:38:38">9-30</span>
                                    </div>
                                    <div class="pl_px">
                                        <div class="star_wapper">
                                            <div class="star_on" style="width: 100%;"></div>
                                        </div>
                                    </div>
                                    <div class="pl_content">
                            <span>🌟 推荐 国庆之际 来看这种题材的电影 爱国的情怀升了八度 还有王菲的片尾曲 助燃又升华 后悔昨天点映没早点儿看了 😊 演技 这个作品演员都很喜欢 之前也看过他们的作品 这次的角色也诠释的很到位 🎉闪光点 电影根据真实故事改编 感谢演职人员能把战争纷乱的时代下故事呈现到我们面前 🥚 彩蛋 结尾居然有个小彩蛋 把我又拉回现实了 祝大家国庆假期愉快

                            </span>
                                    </div>

                                </div>
                                <div class="pl">
                                    <div class="pl_dz">
                                        <span class="report">举报</span>
                                        <div class="approve">
                                            <img src="${pageContext.request.contextPath}/images/p19.png" alt="">
                                            <span class="num">9193</span>
                                        </div>

                                    </div>
                                    <div class="tx"><img class="man1" src="${pageContext.request.contextPath}/images/p17.jpg" alt="">
                                        <img class="dj" src="${pageContext.request.contextPath}/images/p18.png" alt="">
                                    </div>
                                    <div class="pl_user"><span class="name">iwanlong</span>
                                        <span class="tag">购</span></div>

                                    <div class="pl_time" title="2022-09-30 20:38:38">
                                        <span title="2022-09-30 20:38:38">9-30</span>
                                    </div>
                                    <div class="pl_px">
                                        <div class="star_wapper">
                                            <div class="star_on" style="width: 100%;"></div>
                                        </div>
                                    </div>
                                    <div class="pl_content">
                            <span>🌟 推荐 国庆之际 来看这种题材的电影 爱国的情怀升了八度 还有王菲的片尾曲 助燃又升华 后悔昨天点映没早点儿看了 😊 演技 这个作品演员都很喜欢 之前也看过他们的作品 这次的角色也诠释的很到位 🎉闪光点 电影根据真实故事改编 感谢演职人员能把战争纷乱的时代下故事呈现到我们面前 🥚 彩蛋 结尾居然有个小彩蛋 把我又拉回现实了 祝大家国庆假期愉快

                            </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ypzl">
                        <h2 class="bt">影片资料</h2>
                        <img src="${pageContext.request.contextPath}/images/p21.png" alt="">
                    </div>
                    <div class="ryjx">
                        <h2 class="bt">荣誉奖项</h2>
                        <img src="${pageContext.request.contextPath}/images/p22.png" alt="">
                    </div>
                    <div class="pf">
                        <h2 class="bt">票房</h2>
                        <img src="${pageContext.request.contextPath}/images/p23.png" alt="">
                    </div>
                    <div class="dyys">
                        <h2 class="bt">电影原声</h2>
                        <img src="${pageContext.request.contextPath}/images/p24.png" alt="">
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="yzry_head">
                        <div class="dy">导演 <span class="num">（1）</span>

                            <div class="p7"><a href="#"><img src="${director.drImg}" alt=""></a></div>
                            <div class="info"><a href="#">${director.drName}</a></div>
                        </div>
                    </div>
                    <div class="yzry_main">
                        <div class="yy_tag">演员<span class="num">（4）</span>
                            <div class="yy_i">
                                <ul class="yy">
                                    <c:forEach var="actor" items="${actorList}">
                                        <li><div><a href=""><img src="${actor.actorImg}" alt=""></a></div>
                                            <a class="a2" href="#">${actor.actorName}</a><br>
                                            <span class="role">${actor.actorCos}</span></li>
                                    </c:forEach>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="jx">

                        <img src="https://p0.meituan.net/movie/3f23c8fcf910f94011f7fba6c4848b3f15093.jpg@50w_50h_1e_1c" alt="">
                        <span class="s9"> 第14届澳门国际电影节</span>
                        <span class="s10">提名：金莲花奖-最佳影片 / 金莲花奖-最佳男主角 / 金莲花奖-最佳女主角 / 金莲花奖-最佳男配角 / 金莲花奖-最佳女配角</span>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div>
                        <ul class="u2">
                            <c:forEach var="stills" items="${stillsList}" begin="1">
                                <li><img src="${stills.stillsImg}"></li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-tab layui-tab-brief tab_title_right layui-col-md3" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title tab_title">
                <li class="layui-this">预告片</li>
                <li>相关资讯</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <h2 class="bt">预告片</h2>
                    <ul class="u3">
                        <li><img src="https://p0.pipi.cn/friday/422dd3d62d171f4d96731d2de33977b7.jpg?imageView2/1/w/120/h/68" alt="">
                            <span class="s4" >1</span>
                            <a class="a4"> 《万里归途》《万里归途》抉择版预告，张译“失约”家人万茜逆行踏上撤侨路</a>
                            <span class="tb"></span>
                            <span class="s5">635万</span>
                        </li>
                        <li><img src="https://p0.pipi.cn/friday/422dd3d62d171f4d96731d2de33977b7.jpg?imageView2/1/w/120/h/68" alt="">
                            <span class="s4" >2</span>
                            <a class="a4"> 《万里归途》《万里归途》抉择版预告，张译“失约”家人万茜逆行踏上撤侨路</a>
                            <span class="tb"></span>
                            <span class="s5">635万</span>
                        </li>
                        <li><img src="https://p0.pipi.cn/friday/422dd3d62d171f4d96731d2de33977b7.jpg?imageView2/1/w/120/h/68" alt="">
                            <span class="s4" >3</span>
                            <a class="a4"> 《万里归途》《万里归途》抉择版预告，张译“失约”家人万茜逆行踏上撤侨路</a>
                            <span class="tb"></span>
                            <span class="s5">635万</span>
                        </li>
                    </ul>
                    <div class="xgdy">
                        <h2 class="bt">相关电影</h2>
                        <ul class="yy2">
                            <li ><div><a href=""><img src="${pageContext.request.contextPath}/images/p20.jpg" alt=""></a></div>
                                <a class="a5" href="#">万里归途</a><br>
                                <span class="role1">9.6</span></li>
                            <li><div><a href=""><img src="${pageContext.request.contextPath}/images/p20.jpg" alt=""></a></div>
                                <a class="a5" href="#">万里归途</a><br>
                                <span class="role1">9.6</span></li>
                            <li><div><a href=""><img src="${pageContext.request.contextPath}/images/p20.jpg" alt=""></a></div>
                                <a class="a5" href="#">万里归途</a><br>
                                <span class="role1">9.6</span></li>
                        </ul>
                    </div>
                </div>
                <div class="layui-tab-item "><h2 class="bt">相关资讯</h2>
                    <ul class="u3">
                        <li><img src="https://p1.meituan.net/moviemachine/b36515ac1cd02bf24e65219503c4cf0284802.jpg@140w_86h_1e_1c" alt="">
                            <a class="a4" href="">《万里归途》金鸡影展举行特别放映感谢观众</a>
                            <span class="s6">猫眼电影</span>
                            <span class="news-icon-views"></span>
                            <span class="s7">1970</span>
                            <span class="news-icon-comments"></span>
                            <span class="s8">0</span>
                        </li>
                        <li><img src="https://p1.meituan.net/moviemachine/b36515ac1cd02bf24e65219503c4cf0284802.jpg@140w_86h_1e_1c" alt="">
                            <a class="a4" href="">《万里归途》金鸡影展举行特别放映感谢观众</a>
                            <span class="s6">猫眼电影</span>
                            <span class="news-icon-views"></span>
                            <span class="s7">1970</span>
                            <span class="news-icon-comments"></span>
                            <span class="s8">0</span>
                        </li>
                        <li><img src="https://p1.meituan.net/moviemachine/b36515ac1cd02bf24e65219503c4cf0284802.jpg@140w_86h_1e_1c" alt="">
                            <a class="a4" href="">《万里归途》金鸡影展举行特别放映感谢观众</a>
                            <span class="s6">猫眼电影</span>
                            <span class="news-icon-views"></span>
                            <span class="s7">1970</span>
                            <span class="news-icon-comments"></span>
                            <span class="s8">0</span>
                        </li>

                    </ul>
                    <div class="xgdy">
                        <h2 class="bt">相关电影</h2>
                        <ul class="yy2">
                            <li ><div><a href=""><img src="${pageContext.request.contextPath}/images/p20.jpg" alt=""></a></div>
                                <a class="a5" href="#">万里归途</a><br>
                                <span class="role1">9.6</span></li>
                            <li><div><a href=""><img src="${pageContext.request.contextPath}/images/p20.jpg" alt=""></a></div>
                                <a class="a5" href="#">万里归途</a><br>
                                <span class="role1">9.6</span></li>
                            <li><div><a href=""><img src="${pageContext.request.contextPath}/images/p20.jpg" alt=""></a></div>
                                <a class="a5" href="#">万里归途</a><br>
                                <span class="role1">9.6</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="footer">
        <img src="${pageContext.request.contextPath}/images/footer.png" alt="">
    </div>
</div>
<script>
    var temp1=${film.filmScore}*10;
    document.getElementById("d1").style.width=temp1+"%";
    var temp2=${film.filmNos};
    if(temp2>=100000){
        var temp3=temp2/10000;
    document.getElementById("s2").innerText=temp3+"万人评分";
    }else if(temp2>0&&temp2<100000){
        document.getElementById("s2").innerText=temp2+"人评分";
    }
    else if(temp2==0){
        document.getElementById("pf").style.display="none ";
        document.getElementById("zw").style.display="inline ";
    }

    var temp4=${film.filmBo};
    if(temp4>=10000){
        var temp5=temp4/10000;
        document.getElementById("bos").innerText=temp5+"亿";}
    else{
        document.getElementById("bos").innerText=temp4+"万";
    }

</script>
</body>
</html>

